<template>
    <div class="main right-in">
        <h3 class="title_bindex">欢迎来自{{ bistro.area + bistro.address }}的 {{ bistro.name }}，进入系统!</h3>
        <ul class="status_index">
            <li class="bgc_01">
                <router-link :to="{ name: 'positionList'}">
                    <h3>{{ position_counts }}</h3>
                    <span>本店座位數</span>
                </router-link>
            </li>
            <li class="bgc_02">
                <router-link :to="{ name: 'productList'}">
                    <h3>{{ product_counts }}</h3>
                    <span>商品数</span>
                </router-link>
            </li>
            <li class="bgc_03">
                <router-link :to="{ name: 'orderAll'}">
                    <h3>{{ order_counts }}</h3>
                    <span>订单数（今日）</span>
                </router-link>
            </li>
            <li class="bgc_04">
                <router-link :to="{ name: 'productCateGoryList'}">
                    <h3>{{ category_counts }}</h3>
                    <span>商品分类列表</span>
                </router-link>
            </li>
        </ul>
        <div>
            <h3 class="title_bindex title_charts">数据区域图!</h3>
            <h3 class="title_bindex con_charts">产品数据信息今日已经完成更新!</h3>
            <canvas class="charts"></canvas>
        </div>
    </div>
</template>
<script>

  export default {
    data() {
      return {
        position_counts: 0,
        product_counts: 0,
        order_counts: 0,
        category_counts: 0,
        bistro: {

        }
      }
    },
    components: {
    },

    created() {
      this.bistro = this.$store.state.user.me.bistro
      this.bistroData()
    },

    mounted() {

    },

    methods: {
      bistroData() {
        this.$store.dispatch('bistroData').then((ret) => {
          this.position_counts = ret.position_counts
          this.product_counts = ret.product_counts
          this.order_counts = ret.order_counts
          this.category_counts = ret.category_counts
        })
      }

    }
  }
</script>
<style scoped>
    .header { background: #f2f2f2; }
    .status_index li {
        display: inline-block;
        width: 21.95%;
        height: 100px;
        padding: 0 10px;
        margin: 0;
        margin-right: 2%;
        position: relative;
    }
    .status_index li:last-of-type {
        margin: 0;
    }
    .status_index li h3 {
        display: block;
        width: 100%;
        float: left;
        font-size: 36px;
        line-height: 1.2em;
        margin-top: 18px;
        color: #fff;
        text-align: right;
    }
    .status_index li span {
        display: block;
        width: 100%;
        float: left;
        font-size: 14px;
        color: #eee;
        text-align: right;
    }
    .title_charts{
        font-size: 30px;
        font-weight: 600;
    }
    .con_charts{
        font-size: 20px;
        margin: 0;
        margin-bottom: 10px;
    }
    .charts{
        width: 100%;
        height: 600px;
        border: 1px solid #ccc;
    }
</style>
